<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="40">
        <el-col :span="8">
          <el-input v-model="searchText" placeholder="请输入订单编号">
            <el-button slot="append" icon="el-icon-search" @click="search">搜索</el-button>
          </el-input>
        </el-col>

        <el-col :span="8" >
          <el-button type="primary" @click="goBack">重置</el-button>
        </el-col>
      </el-row>

      <!-- 订单列表数据 -->
      <el-table :data="orderList" border stripe>
        <el-table-column label="编号" prop="id" width="80" align="center"></el-table-column>
        <el-table-column label="订单编号" prop="orderNo" width="120" align="center"></el-table-column>
        <el-table-column label="桌台名" prop="tableName" width="80" align="center"></el-table-column>
        <el-table-column label="菜品数量" prop="dishNum" width="80" align="center"></el-table-column>
        <el-table-column label="支付渠道" prop="payChannel" width="100" align="center"
                         :filters="[{ text: '支付宝', value: 1 }, { text: '微信', value: 2 }, { text: '现金', value: 0}]"
                         :filter-method="filterTag">
          <template slot-scope="scope">
            <el-tag
                :type="getTagType(scope.row.payChannel)"
                disable-transitions>{{  getTagText(scope.row.payChannel) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下单方式" prop="orderMethod" width="120" align="center"
                         :filters="[{ text: '外卖', value: 1 }, { text: '自助点菜', value: 2 }, { text: '预约', value: 3}]"
                         :filter-method="filterTag1">
          <template slot-scope="scope">
            <el-tag
                :type="getTagType1(scope.row.orderMethod)"
                disable-transitions>{{  getTagText1(scope.row.orderMethod) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="总价格" prop="totalPrice" width="80" align="center"></el-table-column>
        <el-table-column label="订单状态" prop="orderState" width="120" align="center"
                         :filters="[{ text: '待接单', value: 0 },{ text: '已接单（预约）', value: 1 }, { text: '已接单', value: 2 },{ text: '待取餐', value: 3 },
                         { text: '未支付', value: 4 },{ text: '订单完成（已支付）', value: 5 }]"
                         :filter-method="filterTag2"
                         >
          <template slot-scope="scope">
            <el-tag
                :type="getTagType2(scope.row.orderState)"
                disable-transitions>{{  getTagText2(scope.row.orderState) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="待取餐订单取餐状态信息" prop="takingStatus" width="120" align="center"
                         :filters="[{ text: '保留状态', value: 0 }, { text: '正常状态', value: 1 }, { text: '用餐状态', value: 2}]"
                         :filter-method="filterTag3">
          <template slot-scope="scope">
            <el-tag
                :type="getTagType3(scope.row.takingStatus)"
                disable-transitions>{{  getTagText3(scope.row.takingStatus) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="下单时间" prop="gmtPay" width="160" align="center">
          <template slot-scope="scope">
            {{ scope.row.gmtPay }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete( scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <!-- 分页区域 -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pageSize"
          :total="totalItems"
          layout="total, sizes, prev, pager, next, jumper"
          background
      >
      </el-pagination>

    </el-card>
  </div>
</template>


<script>

import axios from 'axios';

export default {
  name: "LookOrderLIst.vue",
  data() {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      totalItems: 0 ,// 总记录数,
      orderList: [],
      searchText: '',
    }
  },
  methods: {
    searchForOrders(){

    },
    filterTag(value, row) {
      return row.payChannel === value;
    },
    filterTag1(value, row) {
      return row.orderMethod === value;
    },
    filterTag2(value, row) {
      return row.orderState === value;
    },
    filterTag3(value, row) {
      return row.takingStatus === value;
    },
    handleDelete(row) {
      // 弹出确认对话框
      this.$confirm('确认删除此数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = 'http://localhost:10021/orders/delete?id='+row.id;
        console.log("即将传入的id为: "+row.id)
        this.axios.get(url).then((response) =>{
          let jsonResult = response.data;
          if(jsonResult.state == 20000){
            this.$message({
              message:'删除成功!',
              type:'success'
            });
            this.getOrderList();
        }else {
            this.$message({
              message:'删除失败!',
              type:'error'
            })
          }
        }).catch(error => {
          // 发生错误时的提示信息
          this.$message.error('删除失败，请重试！');
          console.error(error);
        })
      })
    },
    goBack() {
      this.getOrderList();
    },

    getTagType(payChannel) {
      switch (payChannel) {
        case 1:
          return 'success';
        case 2:
          return 'danger';
        default:
          return 'info';
      }
    },
    getTagText(payChannel) {
      switch (payChannel) {
        case 1:
          return '支付宝';
        case 2:
          return '微信'
        case 0:
          return '现金';
      }
    },
    getTagType1(orderMethod) {
      switch (orderMethod) {
        case 1:
          return 'success';
        case 2:
          return 'danger';
        case 3:
          return 'info';
      }
    },
    getTagText1(orderMethod) {
      switch (orderMethod) {
        case 1:
          return '外卖';
        case 2:
          return '自助点菜'
        case 3:
          return '预约';
      }
    },
    getTagType2(orderState) {
      switch (orderState) {
        case 0:
          return 'success';
        case 1:
          return 'danger';
        case 2:
          return 'waring';
        case 3:
          return 'info';
        case 4:
          return '';
      }
    },
    getTagText2(orderState) {
      switch (orderState) {
        case 0:
          return '待接单';
        case 1:
          return '已接单（预约）';
        case 2:
          return '已接单';
        case 3:
          return '待取餐';
        case 4:
          return '未支付';
        case 5:
          return '订单完成（已支付）';
      }
    },
    getTagType3(takingStatus) {
      switch (takingStatus) {
        case 0:
          return 'success';
        case 1:
          return 'danger';
        default:
          return 'info';
      }
    },
    getTagText3(takingStatus) {
      switch (takingStatus) {
        case 0:
          return '保留状态';
        case 1:
          return '正常状态';
        default:
          return '用餐状态';
      }
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getOrderList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getOrderList()
    },
    getOrderList() {
      let a = this.queryInfo.pageNum
      let b = this.queryInfo.pageSize
      axios.get('http://localhost:10021'+'/orders?pageNum=' + a + '&pageSize=' + b)
          .then(response => {
            this.orderList = response.data.data.list; // 将返回的数据赋值给orders属性
            this.totalItems = response.data.data.total;// 将返回的总条数赋值给totalItems属性
          })
          .catch(error => {
            console.error(error);
          });
    },
    search() {
      // 获取搜索框的值
      let searchText = this.searchText;

      // 发送异步请求，获取搜索结果
      // 这里以使用axios库发送GET请求为例
      axios.get('http://localhost:10021/orders/orderNo', {
        params: {
          orderNo: searchText
        }
      }).then(response => {
            // 处理搜索结果
            // 在这里对搜索结果进行处理，比如更新组件的数据
            this.orderList =  response.data.data;
          })
          .catch(error => {
            // 处理请求错误
            console.error(error);
          });
    },
    queryData() {
      // 根据新的pageNum和pageSize进行数据查询
      // 更新totalItems值
      // 更新dataList数据
    }
  },
  mounted() {
    this.getOrderList();
    this.queryData();
  },

}
</script>

<style scoped>

</style>